<template>
  <div class="all">
    <!--header 标签  -->
    <header>
      <div class="div" @click="back()">
        <img src="../../../assets/返回.png" alt="" />
        <span style="color: #1da4f2">返回</span>
      </div>
      <div class="div">
        <h>历史记录</h>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <!-- title 日期段 -->
    <div class="title">
      <span>
        <h>请选择日期段:</h>
      </span>
      <span style="display: flex; align-items: center" @click="timeShow = true">
        <a> {{ sTime }} - {{ eTime }} </a>
        <img
          style="width: 13px; height: 7px; margin-left: 5px"
          src="../../../assets/sortBottom.png"
          alt=""
        />
      </span>
    </div>
    <!--日期段弹出框  -->
    <van-calendar
      color="#1da4f2"
      :style="{ bottom: '50px' }"
      v-model="timeShow"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="timeOnConfirm"
    />
    <!-- main主体展示 -->
    <div class="main">
      <van-field
        v-for="(item,index) in LiShidata"
        :key="item.id"
        is-link
        type="text"
        size="large"
        readonly
        :value="item.content + 'kg'"
        :label="item.time.substr(5,2)+'月'+item.time.substr(8,2)+'日'"
        input-align="right"
        @click="DayList(item.time.substr(0,10))"
      >
      <template v-slot:right-icon>
        <img src="../../../assets/xiajiang.png" alt="" style="width:15px;height:17px;" v-show="btm[index]"/>
        <img src="../../../assets/shangsheng.png" alt="" style="width:15px;height:17px;" v-show="top[index]"/>
      </template>
      </van-field>
      <!-- 无历史记录时，占位符 -->
      <van-empty
        style="width: 100%; height: 60%"
        v-show="LiShidata.length<=0"
        :image="require('../../../assets/空两本书.png')"
        description="暂无历史记录"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'LiShiList',
  data() {
    return {
      userid: this.$route.query.userid,
      timeShow: false,
      sTime: '',
      eTime: '',
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      LiShidata:[],
      // 图标是上还是下
      btm: [],
      top: [],
    }
  },
  methods: {
    //获取日期段的体重
    getfindHealthdataTzByTime(){
      this.$http
        .findHealthdataTzByTime({
          startTime: this.sTime,
          endTime: this.eTime,
          type:1,
          sort:1,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.LiShidata=res.data.data.list
            // this.$toast('成功！')
            // 图标是上还是下
            for (var i = this.LiShidata.length - 2; i >= 0; i--) {
              if (this.LiShidata[i].content - this.LiShidata[i + 1].content>0) {
                this.top[i] = 1
                this.btm[i] = 0
              } else {
                this.top[i] = 0
                this.btm[i] = 1
              }
            }
          } 
          else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //   返回
    back() {
      this.$router.history.go(-1)
    },
    //日期段选择
    timeOnConfirm(date) {
      const [start, end] = date
      this.timeShow = false
      this.sTime = this.Common.formatDate(start, 'yyyy/mm/dd')
      this.eTime = this.Common.formatDate(end, 'yyyy/mm/dd')
      this.getfindHealthdataTzByTime()
    },
    // DayList()历史记录-天 跳转
    DayList(i) {
      this.$router.push({
        path: '/DayList',
        query: { userid: this.userid, day:i },
      })
    },
  },
  mounted() {
    //获取初始日期值
    this.sTime = this.Common.formatDate(
      new Date().setDate(new Date().getDate() - 7),
      'yyyy/mm/dd'
    )
    this.eTime = this.Common.formatDate(new Date(), 'yyyy/mm/dd')
    this.getfindHealthdataTzByTime()
  },
}
</script>
<style lang="less" scoped>
// header布局
.all {
  width: 100%;
  /*height: 100%;*/
  height: calc(100vh - 50px);
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}

//title布局
.title {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  height: 44px;
  background: #ffffff;
  justify-content: space-between;
}

//行布局
.main{
  margin-top: 3%;
}
</style>